<template>
	<view class="paynumber-item">
		<view class="navbar">
			<navBar :title="'支付密码'"></navBar>
		</view>
		<view class="number-item">
			<view class="number-name">新密码</view>
			<input class="specific" type="number" placeholder="请输入">
		</view>
		<view class="number-item">
			<view class="number-name">确认密码</view>
			<input class="specific" type="number" placeholder="请再次输入">
		</view>
		<view class="number-item">
			<view class="number-name">手机号</view>
			<view>{{numBer}}</view>
		</view>
		<view class="verification-item">
			<view class="number-name">验证码</view>
			<input class="specific" type="number" placeholder="请输入验证码">
			<view class="verification">
				<view class="verification-num">获取验证码</view>
			</view>
		</view>
		<view class="bottom-button">
			<view class="consent-button">
				<text class="button-item">确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from "@/components/NavBar.vue" // 导入顶部导航
	export default {
		components: {
			navBar
		},
		data() {
			return {
				numBer:"15784526453"
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.paynumber-item{
		.number-item{
			display: flex;
			justify-content: space-between;
			padding:10px 10px;
			background: #FFFFFF20;
			border-radius: 6px 6px 6px 6px;
			border: 1px solid #70707020;
			margin: 10px 20px;
			.number-name{
				text-align: left;
			}
			.specific{
				text-align: right;
				font-size: 14px;
			}
			
		}
		.verification-item{
			display: flex;
			justify-content:left;
			padding:10px 10px;
			background: #FFFFFF20;
			border-radius: 6px 6px 6px 6px;
			border: 1px solid #70707020;
			margin: 10px 20px;
			.number-name{
				width: 20%;
				line-height: 25px;
			}
			.specific{
				text-align: left;
				width: 40%;
				font-size: 14px;
				margin-top: 4px;
				
			}
			.verification{
				margin-left: 14%;
				background: #FFFFFF;
				border-radius: 50px 50px 50px 50px;
				opacity: 1;
				border: 1px solid #F71D1F;
				padding:4px 10px;
				.verification-num{
					display: block;
					font-size:12px;
					color:#F71D1F;
				}
			}
		}
		.bottom-button{
			text-align:center;
			margin-top:40px;
			.consent-button{
				width:90%;
				height:50px;
				background-color: #F71D1F;
				margin: 0 4%;
				border-radius: 10px 10px 10px 10px;
				.button-item{
					display: block;
					font-size: 18px;
					line-height:50px;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
